<template>
	<view>
		<u-navbar placeholder bg-color="#fff" auto-back>
			<view slot="left">
				<view class="u-flex-y-center">
					<u-icon name="arrow-left"></u-icon>
					<view class="u-m-l-36">
						<view class="u-f-36 u-bold">{{statusList[info.status]}}</view>
						<view class="u-f-28 u-m-t-4 u-flex-y-center" v-if="info.status==0">剩<u-count-down :time="info.expire_time" format="HH:mm:ss"></u-count-down>自动关闭</view>
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="u-p-30">
			<view class="u-r-16 u-bg-fff u-p-30 u-flex-y-center u-m-b-30" v-if="info.address">
				<image src="../../static/address.png" style="width: 48rpx;height: 48rpx;"></image>
				<view class="u-flex-1" style="padding: 0 30rpx;">
					<view class="u-f-28 u-bold">{{info.area}}{{info.address}}</view>
					<view class="u-f-28 u-m-t-10" style="color: #666;">{{info.username}} {{info.mobile}}</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="u-r-16 u-bg-fff u-p-30" v-for="(item,index) in info.detail">
				<view class="u-flex-y-center">
					<image :src="item.image" style="width: 200rpx;height: 200rpx;border-radius: 16rpx;">
					</image>
					<view class="u-flex-1 u-m-l-30">
						<view class="u-flex u-flex-between">
							<view class="u-f-28 u-bold u-line-2 u-flex-1">{{item.name}}</view>
							<view class="u-m-l-20" style="text-align: right;">
								
								<view class="u-f-28 " style="color: #999999;">x{{item.number}}</view>
							</view>
						</view>
						<view class="u-f-24 u-m-t-10" style="color: #999999;">{{item.attr_name}}</view>
						<u-gap height="40rpx"></u-gap>
						<view class="u-flex-y-center u-flex-between">
							<view style="color: #ED361D;">
								<text class="u-f-24">¥</text><text class="u-f-32">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <u-gap height="30rpx"></u-gap>
			<view class="u-r-16 u-bg-fff u-p-30">
				<u-line margin="30rpx 0" color="#EFEFEF"></u-line>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">配送服务</view>
					<view class="u-f-28" style="color: #666;">七天无理由退换·运费险</view>
				</view>
				<u-line margin="30rpx 0" color="#EFEFEF"></u-line>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">等级优惠</view>
					<view class="u-f-28" style="color: #666;">黑卡会员下单享96折</view>
				</view>
				<u-line margin="30rpx 0" color="#EFEFEF"></u-line>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">订单备注</view>
					<view class="u-flex-y-center">
						<view class="u-f-28" style="color: #999;">{{info.remark||''}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view> -->
			<u-gap height="30rpx"></u-gap>
			
			<view class="u-r-16 u-bg-fff u-p-30">
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">商品金额</view>
					<view class="u-f-28 u-bold">¥{{info.total}}</view>
				</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">商品件数</view>
					<view class="u-f-28">{{info.number}}件</view>
				</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">优惠总额</view>
					<view class="u-f-28" style="color: #ED361D;">¥{{info.discount_amount}}</view>
				</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">运费</view>
					<view class="u-f-28">¥{{info.shipfee}}</view>
				</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">合计</view>
					<view class="u-f-28">¥{{info.amount}}</view>
				</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between" @click="copy(info.order_no)">
					<view class="u-f-28">订单编号</view>
					<view class="u-f-28" style="color: #999999;">{{info.order_no}}<text style="color: #333;">｜复制</text></view>
				</view>
				<u-gap height="30rpx"></u-gap>
				<view class="u-flex-y-center u-flex-between">
					<view class="u-f-28">下单时间</view>
					<view class="u-f-28" style="color: #999999;">{{$u.timeFormat(info.createtime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-t-30" v-if="info.pay_time">
					<view class="u-f-28">支付时间</view>
					<view class="u-f-28" style="color: #999999;">{{$u.timeFormat(info.pay_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-t-30" v-if="info.delivery_time">
					<view class="u-f-28">发货时间 </view>
					<view class="u-f-28" style="color: #999999;">{{$u.timeFormat(info.delivery_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-t-30" v-if="info.cancel_time">
					<view class="u-f-28">取消时间</view>
					<view class="u-f-28" style="color: #999999;">{{$u.timeFormat(info.cancel_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-t-30" v-if="info.end_time">
					<view class="u-f-28">完成时间</view>
					<view class="u-f-28" style="color: #999999;">{{$u.timeFormat(info.end_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="u-flex-y-center u-flex-between u-m-t-30">
					<view class="u-f-28">总计金额</view>
					<view class="u-f-28" style="color: #ED361D;">¥{{info.amount}}</view>
				</view>
				
			</view>
		</view>
		<view style="height: 160rpx;"></view>
		<view class="appBottom">
			<view style="justify-content: flex-end;" class="u-flex-y-center">
				<view class="btn" v-if="info.status==0||info.status==1" @click="cancel(info.order_no)">取消订单</view>
				
				<view class="btn1"  v-if="info.status==0" @click="pay(info.order_no)">去支付</view>
				<!-- <view class="btn" v-if="info.status==1" @click="cancel(info.order_no)">取消订单</view> -->
				<!-- <view class="btn1"  v-if="info.status==1" @click.stop="$u.route('/pages/order/sendSale?order_no='+info.order_no)">申请退款</view> -->
				<!-- <view class="btn"  v-if="info.status==2" @click.stop="$u.route('/pages/order/sendSale?order_no='+info.order_no)">申请退款</view> -->
				<view class="btn"  v-if="info.status==2" @click.stop="$u.route('/pages/order/wuliu?order_no='+info.order_no)">查看物流</view>
				<view class="btn1"  v-if="info.status==2" @click="confirm(info.order_no)">确认收货</view>
				<view class="btn" v-if="info.status==3" @click="del(info.order_no)">删除订单</view>
				<!-- <view class="btn1" v-if="info.status==3&&info.is_comment==0" >去评价</view> -->
				
				
			</view>
		</view>
		<u-popup :show="show" @close="show=false" closeable round="30rpx">
			<view style="padding: 40rpx 30rpx;">
				<view class="u-f-28 u-bold u-text-center">填写备注</view>
				<u-gap height="40rpx"></u-gap>
				<textarea class="u-r-16 u-p-20 u-f-28" style="background-color: #f8f8f8;width: 100%;" placeholder="选填，请先和商家协商一致，付款后商家可见。"></textarea>
				<u-gap height="70rpx"></u-gap>
				<view class="appBtn">确认</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_no:'',
				info:{},
				statusList:['待支付','待发货','待收货','已完成','已取消','售后']
			}
		},
		onLoad(opt) {
			this.order_no = opt.order_no
			
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			copy(e) {
				uni.setClipboardData({
					data: e,
					success: function(res) {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				})
			},
			confirm(order_no){
			        var _this = this
			        uni.showModal({
			          title: '是否确认收货',
			          async success(result) {
			            if (result.confirm) {
			              await uni.$u.http.post('Order/orderConfirm',{order_no})
			              uni.$u.toast('操作成功')
			             
			              _this.getInfo()
			            }
			          }
			        })
			      },
			      cancel(order_no){
			        var _this = this
			        uni.showModal({
			          title: '是否取消订单',
			          async success(result) {
			            if (result.confirm) {
			              await uni.$u.http.post('Order/orderCancel',{order_no})
			              uni.$u.toast('操作成功')
			             
			              _this.getInfo()
			            }
			          }
			        })
			      },
				   del(order_no){
			        var _this = this
			        uni.showModal({
			          title: '删除订单后无法恢复，请谨慎操作',
			          async success(result) {
			            if (result.confirm) {
			              await uni.$u.http.post('Order/orderDelete',{order_no})
			              uni.$u.toast('操作成功')

			              _this.getInfo()
			            }
			          }
			        })
			      },
				  async pay(order_no) {
				  	let res = await uni.$u.http.post('order/pay', {
				  		order_no: order_no,
				  		type: 1
				  	});
				  	let _this = this
				  	uni.requestPayment({
				  		"provider": "wxpay",
				  		timeStamp: res.timeStamp,
				  		nonceStr: res.nonceStr,
				  		package: res.package,
				  		signType: res.signType,
				  		paySign: res.paySign,
				  		success(res2) {
				  			uni.hideLoading()
				  			uni.showToast({
				  				title: '支付成功',
				  				icon: 'none'
				  			})
				  			setTimeout(function(){
				  				_this.list = []
				  				_this.page = 1
				  				_this.getList()
				  			},1000)
				  		},
				  		fail(e) {
				  			uni.hideLoading()
				  			uni.showToast({
				  				title: '支付失败,请重新支付',
				  				icon: 'none'
				  			})
				  		}
				  	})
				  },
			async getInfo(){
				let res= await uni.$u.http.post('order/detail',{order_no:this.order_no});
				this.info = res
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
	
	.btn {
		width: 170rpx ;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #E7E7E7;
		font-size: 28rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 18rpx;
	}
	
	.btn1 {
		width: 170rpx;
		height: 70rpx;
		background: #AD0801;
		border-radius: 8rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 70rpx;
		margin-left: 18rpx;
	}
</style>